<template>
    <SysQueryFrom>
        <template v-slot:form_info>
            <El-form
                :model="formObj"
                class="form_content"
                ref="formRef"
                :inline="true"
            >
                <el-row :gutter="20">
                    <el-col :span="6">
                        <el-form-item label="用户组信息：" prop="keyword">
                            <el-input
                                v-model="formObj.keyword"
                                placeholder="请输入用户组/创建人/手机号"
                            />
                        </el-form-item>
                    </el-col>

                    <el-col :span="6">
                        <el-form-item label="用户组状态：" prop="status">
                            <el-select
                                v-model="formObj.status"
                                placeholder="请选择"
                            >
                                <el-option
                                    v-for="item in userGroupStatusOption"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </El-form>
            <slot name="form_other"></slot>
        </template>

        <template v-slot:form_btn>
            <SysQueryBtn @btnClick="btnClick"></SysQueryBtn>
        </template>
    </SysQueryFrom>
</template>

<script setup lang="ts">
import { userGroupStatusOption } from "@/views/system/userGroupManager/index";

const formRef = ref();
const emit = defineEmits(["fromQuery", "reset"]);
const formObj = reactive({
    keyword: "", // 用户组信息
    status: "", // 用户组状态
});

//查询按钮点击
function btnClick(item: any) {
    if (item.event === "queryClick") {
        querTableList();
        return;
    }
    resetClick();
}

// 查询
function querTableList() {
    emit("fromQuery", formObj);
}

// 重置按钮点击
function resetClick() {
    formRef.value.resetFields();
    emit("reset");
}

onBeforeMount(async () => {
    await querTableList();
});

defineExpose({ querTableList, formObj });
</script>

<style lang="scss" scoped>
.form_content {
    width: 80%;
    :deep(.el-form-item) {
        align-items: center;
        margin-bottom: 21px;
        .el-input,
        .el-select {
            height: 40px;
            width: 230px;
            .el-select__wrapper {
                height: 40px;
                line-height: 40px;
            }
        }
    }
}
</style>
